<div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-8">
        <form #articleForm="ngForm">
            <div class="form-group row has-success">
                <label for="articleTitle" class="col-xs-2 form-control-label">标题</label>
                <div class="col-xs-10">
                    <input required [(ngModel)]="articleTitle" name="articleTitle" class="form-control form-control-success" type="text" id="articleTitle" placeholder="请输入文章标题" placement="top" ngbTooltip="文章标题长度应在5到50个字符之间">
                </div>
            </div>
            <hr>
            <div class="form-group row has-warning">
                <label for="articleSynopsis" class="col-xs-2 form-control-label">简介</label>
                <div class="col-xs-10">
                    <input required [(ngModel)]="articleSynopsis" name="articleSynopsis"  class="form-control form-control-warning" type="text" id="articleSynopsis" placeholder="请输入文章简介" placement="top" ngbTooltip="文章简介长度应在10到255个字符之间">
                </div>
            </div>
            <hr>
            <div class="form-group row has-danger">
                <label for="articleArea" class="col-xs-2 form-control-label">频道</label>
                <div class="col-xs-10">
                    <select required [(ngModel)]="articleArea" name="articleArea"  class="form-control form-control-danger" id="articleArea">
                        <option *ngFor="let articlesArea of articlesAreas" value="{{articlesArea.id}}">{{articlesArea.title}}</option>
                    </select>
                </div>
            </div>
            <hr>
            <div class="form-group row">
                <label class="col-xs-2 col-form-label">正文</label>
                <div class="col-xs-10">
                    <my-articleEditor></my-articleEditor>
                    <small class="form-text text-muted">请填写文章正文。正文不得包含令人反感的信息，且长度应在10到65535个字符之间。</small>
                </div>
            </div>
            <ngb-alert type="success" [dismissible]="false">
                确认文章信息无误后，点击下方左侧“提交投稿”按钮提交投稿。
            </ngb-alert>
            <hr>
            <button type="button" [disabled]="!articleForm.form.valid" class="btn btn-primary" (click)="uploadArticle()">提交投稿</button>
        </form>
    </div>
    <div class="col-sm-2"></div>

</div>